<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--react的核心库-->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!--react的与dom相关的一些功能-->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!--将浏览器不支持的jsx语法转化为js语法-->
    <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

</head>
<body>
      <div id="root"></div>    
</body>

</html>
<script type="text/babel">
      var data={
          message:"Hello World",
		  isShow:true
      }
	  
	  function clickFn(){
	  	  data.isShow = !data.isShow
		  render()
	  }
  
	  let render =()=>{
		  ReactDOM.render(
			  <div>
				   {data.isShow? <p>{data.message}</p> : null}
				   <button onClick={clickFn}>显示隐藏</button>
			  </div>,
			  document.getElementById("root")  
		  )
	  }
      render()
      
     

</script>